<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        .cw-content {
            display: table;
            margin: auto;
            margin-top: 10px;
            background-color: blueviolet;
        }

        .fw-content {
            display: fit-content;
            margin: auto;
            margin-top: 10px;
            background-color: blueviolet;
        }
    </style>
</head>

<body>
    <div class="cw-content">谢谢大家</div>
    <div class="cw-content">werwerwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwww</div>

    <div class="fw-content">谢谢大家</div>
    <div class="fw-content">werwerwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwww</div>

    <p style="width: max-content;">min-content</p>

    <h1>min-content</h1>
    <section style="width: min-content">
        <p>感谢您的支持</p>
        <p>感谢您的支持！</p>
        <p>感谢————————比心</p>
        <p>https://demo.cssworld.cn/new/3/3-2.php</p>
    </section>

    <h1>min-content</h1>

    <div style="border: solid deepskyblue">
        <p style="width: max-content">可以让元素尽可能的大，保证图文内容在一行显示</p>
    </div>

    <h1>border-image</h1>
    <div
        style="border: 54px solid transparent;border-image: url(https://res.weread.qq.com/wrepub/epub_40870013_59) 54; height: 100px; width:100px;border-image-slice: 33.33% ;">
    </div>

    <h1>border-image-width</h1>
    <h2>0.75</h2>
    <div
        style="border: 54px solid transparent;border-image: url(https://res.weread.qq.com/wrepub/epub_40870013_59) 54; height: 100px; width:100px;border-image-slice: 33.33%; border-image-width: 0.75;">
    </div>

    <h2>1</h2>
    <div
        style="border: 54px solid transparent;border-image: url(https://res.weread.qq.com/wrepub/epub_40870013_59) 54; height: 100px; width:100px;border-image-slice: 33.33%; border-image-width: 0.75;">
    </div>

    <h2>1.5</h2>
    <div
        style="border: 54px solid transparent;border-image: url(https://res.weread.qq.com/wrepub/epub_40870013_59) 54; height: 100px; width:100px;border-image-slice: 33.33%; border-image-width: 1.5;">
    </div>

    <h2>border-image-outset</h2>
    <div style="border: 54px solid transparent;
        border-image: url(https://res.weread.qq.com/wrepub/epub_40870013_59) 54;
         height: 100px; 
         width:100px;
         border-image-slice: 33.33%;
         border-image-width: 1.5;
         border-image-outset: 1rem;">
    </div>

    <h2>border-image-repeat</h2>
    <div style="
        border: 54px solid transparent;
        border-image: url(https://res.weread.qq.com/wrepub/epub_40870013_59) 54; 
        height: 140px; 
        width:200px;
        border-image-slice: 33.33%; 
        border-image-outset: 1rem;
        border-image-repeat: round;
        ">
    </div>

    <p style="
      border: 54px solid transparent;
      border-style: solid;
      border-image: linear-gradient(deepskyblue, deeppink) 20  / 10px;
    "></p>

    <p style="
      border: 54px solid transparent;
      border-style: solid;
      border-image: linear-gradient(deepskyblue, deeppink) 20  / 10px;
    "></p>

    <h2>红色条纹框表示警示</h2>
    <div style="
        border: 12 solid; 
        border: 12px solid transparent;
        border-image: repeating-linear-gradient(-45deg,red,red 5px, transparent 5px,transparent 10px) 12;">
        我们可以使用红色条纹边框表示警示
    </div>

    <h2>text-decoration-skip</h2>
    <p style="text-decoration:underline;text-decoration-skip: skip;">zhangxinxu</p>
    <p style="text-decoration:underline;text-decoration-skip: ink;">zhangxinxu</p>
    <p style="text-decoration:underline;text-decoration-skip: none;">zhangxinxu</p>

    <h2>hls</h2>
    <style>
        .hls-button {
            background-color: hsl(213.3, 82.8%, 54.3%);
        }

        .hls-button:active {
            background-color: hsl(213.3, 82.8%, 50%);
        }
    </style>
    <button class="hls-button">2323</button>
</body>

</html>